<!--#layout("/common/page.html",{"jsBase":"/js/"}){  -->
<!--图片裁剪    -->
<script type="text/javascript" src="${ctxPath}/plugins/Jcrop-0.9.12/js/jquery.Jcrop.js?v=${jsVer }"></script>
<link rel="stylesheet" href="${ctxPath}/plugins/Jcrop-0.9.12/css/jquery.Jcrop.css?v=${jsVer }" type="text/css" />
<script>
	function startJcrop() {
		// 用于头像裁剪
		$('#target img').Jcrop({
			touchSupport : true,
			minSelect : [ 50, 50 ],
			aspectRatio : 1,// 宽高比
			onChange : showCoords,
			onSelect : showCoords,
			onRelease : clearCoords
		}, function() {
			// Use the API to get the real image size
			var bounds = this.getBounds(); // 获取图片实际尺寸
			boundx = bounds[0];
			boundy = bounds[1];
			jcrop_api = this;
			var imgSrc = $("#target img").attr("src");
			getImageWidth(imgSrc, function(w, h) {
				$("#bili").val(w / boundx);
				bilix = boundx / w;
				biliy = boundy / h;
			});
		});
	}
	function showCoords(c) {
		var targetw = 200;
		$('#x1').val(Math.round(c.x / bilix));
		$('#y1').val(Math.round(c.y / biliy));
		$('#x2').val(Math.round(c.x2 / bilix));
		$('#y2').val(Math.round(c.y2 / biliy));
		$('#w').val(Math.round(c.w / bilix));
		$('#h').val(Math.round(c.h / biliy));
		$('#preview').css({
			width : Math.round(targetw / c.w * boundx) + 'px',
			height : Math.round(targetw / c.h * boundy) + 'px',
			marginLeft : '-' + Math.round(targetw / c.w * c.x) + 'px',
			marginTop : '-' + Math.round(targetw / c.h * c.y) + 'px',
		});
	};

	function clearCoords() {
		$('#faceCoords .reset').val('');
	};
	function getImageWidth(url, callback) {
		var img = new Image();
		img.src = url;

		// 如果图片被缓存，则直接返回缓存数据
		if (img.complete) {
			callback(img.width, img.height);
		} else {
			// 完全加载完毕的事件
			img.onload = function() {
				callback(img.width, img.height);
			}
		}
	}
</script>
<script>
	layui.use([ 'upload', 'form' ], function() {
		var upload = layui.upload; //得到 upload 对象
		var form = layui.form;
		form.render();
		var jcrop_api;
		upload.render({
			elem : '#faceUploadBtn' // 指定原始元素，默认直接查找class="layui-upload-file"
			,
			title : '点击上传头像',
			method : '',
			url : '/core/jcrop/upload.json',
			//type : '', // 设定上传的文件类型，也可以直接在input设置lay-type="" images:图片 file：文件  video：视频文件 audio：音频文件,
			ext : 'jpg|png|gif' // 自定义可支持的文件扩展名，也可以直接在input设置lay-ext=""来取代
			,
			done : function(res, input) {
				console.log(res.data.path);
				var fileId = res.data.id;
				
				var url = "/core/file/inline/" + fileId;
				//var url = res.data.path;
				
				if (jcrop_api)
					jcrop_api.destroy();
				var img = "<img src='" + url + "' class='img-responsive' />"
				$("#target").html(img);
				$("#preview").attr("src", url);
				$("#targetSrc").val(url);
				if (res.code == 0) {
					$("#upload-info").html("文件上传完毕");
					$("#fileId").val(fileId);
					$(".jcrop-options").removeClass("layui-hide").show();
				} else {
					if (res.msg) {
						$("#upload-info").html(res.msg);
						return;
					}
				}
				startJcrop();
			},
			before : function(input) {
				// 返回的参数item，即为当前的input DOM对象
				// console.log('文件上传中');
				$("#upload-info").html("文件上传中");
			}
		});
	});

	$(function() {

		startJcrop();

		// 用户裁剪图片时获得位置等参数
		$('#coords').on('change', 'input', function(e) {
			var x1 = $('#x1').val(), x2 = $('#x2').val(), y1 = $('#y1').val(), y2 = $('#y2').val();
			jcrop_api.setSelect([ x1, y1, x2, y2 ]);
		});

		// 裁剪图片完成时
		$(document).on("submit", "#faceCoords", function() {
			$.get(this.action, $(this).serialize(), function(res) {
				console.log(res);
				$("#savedView").empty();
				if (res.code == 0) {
					var fileId = res.data.id;
					var url = "/core/file/inline/" + fileId;
					$("#savedView").html("<div>你的头像</div><img class='img-responsive' src='" + url + "' />");
					$("#facePath").val(res.data.path);
					$("#faceForm").show();

				} else {
					$("#savedView").html(res.msg);
				}

			}, "json")
			return false; // 阻止表单自动提交事件
		});
	})
</script>
<div class="layui-container">

	<div class="panel-body">
		<div class="line">
			<button class="layui-btn test" id="faceUploadBtn">上传图片</button>
			<span id="upload-info"></span>
		</div>
		<div class="line margin-top jcrop-options layui-hide grid">
			<div class="x6">
				<div id="target"></div>
				<div class="text-yellow">请在图片上拖拽选取合适的区域进行裁剪</div>
				<form id="faceCoords" class="coords " action="/jcropOperateImage" method="get">
					<input type="hidden" name="fresh" id="fresh" /> <input type="hidden" name="fileId" id="fileId" />
					<div class="layui-hide">
						<div class="line margin-top">
							<input type="text" class="input" name="src" id="targetSrc" value="" />
						</div>
						<div class="line margin-top">
							<label>X1 <input type="text" size="4" id="x1" name="x" class="reset" /></label> <label>Y1 <input type="text" size="4" id="y1" name="y" class="reset" /></label> <label>X2 <input type="text" size="4" id="x2" name="x2" class="reset" /></label> <label>Y2 <input type="text" size="4" id="y2" name="y2" class="reset" /></label> <label>W <input type="text" size="4" id="w" name="width" class="reset" /></label> <label>H <input type="text" size="4" id="h" name="height" class="reset" /></label>
							<label>H <input type="text" size="4" id="bili" name="" /></label>
						</div>
					</div>
					<div class="align-center">
						<input type="submit" class="button border-main" value="裁剪" />
					</div>
				</form>
			</div>
			<div class="x6 align-center">
				<div class="hidden">
					<div>预览：</div>
					<div style="width: 200px; height: 200px; overflow: hidden; border: 1px solid gray;">
						<img id="preview" width="200px" height="200px" style="max-width: none" src="/img/" />
					</div>
				</div>
				<div id="savedView" class="text-center margin-small-top"></div>
				<form action="/space/saveFace" id="faceForm" style="display: none">
					<input type="hidden" value="" name="facePath" id="facePath" /> <input type="submit" value="保存头像" class="button button-big bg-yellow button-block" />
				</form>
			</div>
			<div class="xl12 xm12"></div>
		</div>
	</div>
</div>
<!--#}  -->
